import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import moment from 'moment'
import OperatorConstant from "../../utils/OperatorConstant";
import RightBox from "../commons/RightBox";
import RIGHT from "../../utils/RightConstants";

const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';


export default Form.create({wrappedComponentRef: true})(class RelateForex extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            open:false,
            loading: false
        }
    }



    handleCancel=()=>{
        this.props.form.resetFields();
        this.setState({ loading: false });
    }

    handleSplit=(re)=>{
        const {validateFields}=this.props.form;
        let norelateamount=this.props.dataSource.norelateamount;
        validateFields((errors,values)=>{
            if(errors){
                return
            }
            if(values.amount>norelateamount)
            {
                message.error("拆分金额大于待关联金额");
                return
            }

            this.props.dispatch({
                type:'foreignExchangeManage/splitForex',
                payload:{
                    amount:values.amount,
                    forexId:this.props.forexId,
                    onSuccess:()=>{
                        message.info("拆分成功");
                        if(re && re.resetLoading)re.resetLoading(false);                        
                        this.props.form.resetFields();
                        this.props.handleClose();
                    },
                    onFail: () => {if(re && re.resetLoading)re.resetLoading(false)}                    
                }
            });
            
            if(re && re.resetLoading)re.resetLoading(true);
        })

    }

    handleChangeAmount=(value)=>{
        let dataSource=this.props.dataSource;
        let bankexchangerate=R.isNil(dataSource)?null:dataSource.bankexchangerate;
        let cstexchangerate=R.isNil(dataSource)?null:dataSource.cstexchangerate;
        value=isNaN(value)?0:value;
        this.props.form.setFieldsValue({bank_amount:bankexchangerate*value});
        this.props.form.setFieldsValue({customer_amount:cstexchangerate*value});
    }

    render() {
        const { getFieldDecorator} = this.props.form;
        // let formItemLayout=this.props.formItemLayout;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};

        return(
            <Tabs>
                <TabPane tab="分拆外汇" key="2">
                    <Form>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout}  label={"拆分金额"}>
                                    {getFieldDecorator('amount',{
                                            rules:[
                                                {required:true}
                                            ]
                                        }
                                    )(
                                        <InputNumber onChange={this.handleChangeAmount.bind(this)} style={{width: '100%'}} min={0} maxLength="11"/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label={"客户结汇金额"}>
                                    {getFieldDecorator('customer_amount',{
                                            rules:[],
                                            initialValue:0
                                        }
                                    )(
                                        <InputNumber disabled={true} style={{width: '100%'}}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label={"银行结汇金额"}>
                                    {getFieldDecorator('bank_amount',{
                                            rules:[],
                                            initialValue:0
                                        }
                                    )(
                                        <InputNumber disabled={true} style={{width: '100%'}}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </TabPane>
            </Tabs>

        )
    }
})


